<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>商品详情</title>
    <link rel="stylesheet" href="./css/prodetails.css">
</head>

<body>
    <!-- 外部容器 -->
    <div class="outer">
        <!-- 顶部容器 -->
        <div class="header">
            <!-- 左箭头 -->
            <div class="leftarr">
                <a href="#"><img src="./img/zjt.png" alt=""></a>
            </div>
            <!-- 搜索 -->
            <div class="searchtext">
                <span>水果熟了</span>
            </div>
            <!-- 右按钮 -->
            <div class="rightbtn">
                <img src="./img/rightbtn.jpg">
            </div>
        </div>

        <!-- 商品图片 -->
        <div class="pro">
            <div class="proimg">
                <img src="./img/proimg.jpg">
            </div>
            <div class="mark">
            </div>
            <div class="titles">
                <p>&nbsp;&nbsp;&nbsp;【农夫山泉】&nbsp;550ml/瓶</p>
            </div>
            <div class="water">
                <p>&nbsp;&nbsp;&nbsp;纯净水</p>
            </div>
            <div class="price">
                <p>&nbsp;&nbsp;&nbsp;￥<span class="sp1">1.50</span>&nbsp;&nbsp;
                    <span class="sp2">￥2.00</span>
                </p>
            </div>
        </div>
        <!-- 商品介绍 -->
        <div class="detail">
            <div class="service">
                <p class="pser">服务</p>
                <div class="mark1"><img src="./img/mark.png" alt=""></div>
                <p class="ptext">好吃新鲜健康</p>
                <div class="mark1"><img src="./img/mark.png" alt=""></div>
                <p class="ptext">无条件退换货</p>
                <div class="mark1"><img src="./img/mark.png" alt=""></div>
                <p class="ptext">客服快速反应</p>
            </div>
            <div class="active">
                <p class="act1">活动</p>
                <div class="liji">
                    <p>赠送积分</p>
                </div>
                <p class="act2">购买本商品即可获得0积分</p>
            </div>
        </div>
        <!-- 用户评价 -->
        <div class="score">
            <p>用户评价</p>
        </div>
        <!-- 商品介绍 -->
        <div class="addshop">
            <div class="shopcar">
                <div class="shopcarimg"><img src="./img/shopcar.png"></div>
                <div class="er">
                    <div class="num">
                        <p>1</p>
                    </div>
                </div>
                <div class="shopcartext">
                    <p>购物车</p>
                </div>
            </div>
            <div class="shu"></div>
            <div class="show">
                <div class="showimg"><img src="./img/show.png"></div>
                <div class="showtext">
                    <p>分享</p>
                </div>
            </div>
            <div class="add">
                <p>加入购物车
                </p>
            </div>
        </div>
    </div>
</body>

</html>